<template>
  <div>
    <h2>商家信息录入</h2>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="商家类型" prop="merchantName">
        <el-select v-model="form.merchantName">
          <el-option value="公司化公寓">公司化公寓</el-option>
          <el-option value="个人商户">个人商户</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户名称" prop="tenantName">
        <el-input v-model="form.tenantName" placeholder="请输入商户名称"/>
      </el-form-item>
      <el-form-item label="法人" prop="legalPerson">
        <el-input v-model="form.legalPerson" placeholder="请输入法人"/>
      </el-form-item>
      <el-form-item label="省市区" prop="areas">
        <el-cascader
          v-model="form.regions"
          :options="regionList"
          :props="{ expandTrigger: 'hover' }"></el-cascader>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入地址"/>
      </el-form-item>
      <el-form-item label="统一信征码" prop="unifyCode">
        <el-input v-model="form.unifyCode" placeholder="请输入统一信征码"/>
      </el-form-item>
      <el-form-item label="身份证" prop="idCard">
        <el-input v-model="form.idCard" placeholder="请输入身份证"/>
      </el-form-item>
      <el-form-item label="营业执照" prop="license">
        <el-input v-model="form.license" placeholder="请输入营业执照"/>
      </el-form-item>
      <el-form-item label="认证视频">
        <uploader :options="options" class="uploader-example"
                  @file-added="onFileAdded">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>
      <el-form-item label="系统用户Id" prop="userId">
        <el-input v-model="form.userId" placeholder="请输入系统用户Id"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交审核</el-button>
        <el-button type="primary" @click="reset">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SparkMD5 from 'spark-md5'

export default {
  // 商户入住
  name: 'AddBusiness',
  data () {
    return {
      options: {
        target: 'http://localhost:8080/file/postFileUpload', // 目标上传 URL
        chunkSize: '2048000', // 分块大小
        fileParameterName: 'file', // 上传文件时文件的参数名，默认file
        maxChunkRetries: 3, // 最大自动失败重试上传次数
        testChunks: false // 是否开启服务器分片校验
      },
      // 省市县数据
      regionList: [],
      form: {
        merchantName: null,
        tenantName: null,
        legalPerson: null,
        regions: [],
        regionId1: null,
        regionId2: null,
        regionId3: null,
        address: null,
        status: null,
        unifyCode: null,
        idCard: null,
        license: null,
        ownership: null,
        userId: null
      },
      // 表单校验
      rules: {}
    }
  },
  methods: {
    // 表单重置
    reset () {
      this.form = {
        id: null,
        merchantName: null,
        tenantName: null,
        legalPerson: null,
        regionId1: null,
        regionId2: null,
        regionId3: null,
        address: null,
        status: 0,
        unifyCode: null,
        idCard: null,
        license: null,
        ownership: null,
        createTime: null,
        userId: null
      }
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.regionId1 = this.form.regions[0]
          this.form.regionId2 = this.form.regions[1]
          this.form.regionId3 = this.form.regions[2]
          this.axios.post('/business/tenant/add', this.form).then(res => {
            this.$message.success('新增成功')
            this.$router.push('/success')
          })
          return null
        }
      })
      this.axios.get('/business/act/askForBiz').then(res => {
        this.$message.success('启动流程')
      })
    },
    // 省市县
    getListCity () {
      this.axios.get('/house/region/list').then(res => {
        this.regionList = res.data
      })
    },
    // 文件上传
    onFileAdded (file) {
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file)
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result)
        console.log(md5)
        file.uniqueIdentifier = md5
      }
    }
  },
  created () {
    this.getListCity()
  }
}
</script>

<style scoped>

</style>
